<%@ page language="java" contentType="text/html; charset=UTF8" pageEncoding="UTF8"
         import="es.ats.codington.festival.domain.Event" 
         import="java.util.ArrayList"%>
<html>
	<head>
		<jsp:include page="wireframe.jsp"/>
        <link rel="stylesheet" type="text/css" href="./css/eventlist.css" />
	</head>
	<body>
		<jsp:include page="navbar.jsp"/>
        <div class="container-fluid" style="margin-top:20px;">
	        <div class="container container-pad" id="property-listings">       
	            <div class="row">
	              <div class="col-md-12">
	                <h1><%=request.getAttribute("tittle")%></h1>
	              </div>
	            </div>
	            
	            <%int lsize=(Integer) request.getAttribute("eventsize");%>
	            <%ArrayList<Event> events = new ArrayList<Event>();%>
	            <%events=(ArrayList<Event>) request.getAttribute("allevents");%>
	            
	            <div class="row">
	                <div class="col-sm-6"> 
	                    <!-- Begin Pair Listing-->
	                    <%for (int i=0;i<lsize;i+=2){%>
	                    <div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing">
	                        <div class="media box-shbd">
	                        	<a class="pull-left" href="#" target="_parent">
	                            <img alt="image" class="img-responsive" src="eventimage?eventid=<%=events.get(i).getEventId()%>"></a>
								<div class="clearfix visible-sm"></div>
	                            <div class="media-body fnt-smaller">
	                                <h3 class="media-heading">
	                                  <b style="color:black"><%=events.get(i).getName()%></b></h3>
	                                <h4 class="media-heading btm-mrg-10">
	                                  <b style="color:blue">$<%=events.get(i).getPrice()%></b>
	                                  <form class="navbar-form" action="event" method="get">
										<div class="input-group">
												<div class="input-group-btn">
													<input type="hidden" value="<%=events.get(i).getEventId()%>" name="eventid">
													<button class="btn btn-primary btn-block btn-sm" type="submit"><i class="glyphicon glyphicon-eye-open"></i> See More!</button>
												</div>
											</div>
										</form>
									</h4>
	                                <ul class="list-inline mrg-0 btm-mrg-10 clr-535353">
	                                    <li>Duration: <%=events.get(i).getDuration()%> min</li>
	                                    <li style="list-style: none">|</li>
	                                    <li><%=events.get(i).getSeatsAvailable()%> seats available</li>
	                                </ul>
		                                <p><%=events.get(i).getDescription()%></p>
	                                <span class="fnt-lighter fnt-arial"><%=events.get(i).getStart()%></span>
	                            </div>
	                        </div>
	                    </div>
	                    <%}%>
	                	<!-- End Listing-->
	                </div>
	                <div class="col-sm-6">  
						<!-- Begin Odd Listing-->
	                    <%for (int i=1;i<lsize;i+=2){%>
	                    <div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing">
	                        <div class="media box-shbd">
	                            <a class="pull-left" href="#" target="_parent">
	                            <img alt="image" class="img-responsive" src="eventimage?eventid=<%=events.get(i).getEventId()%>"></a>
								<div class="clearfix visible-sm"></div>
	                            <div class="media-body fnt-smaller">
	                                <h3 class="media-heading">
	                                  <b style="color:black"><%=events.get(i).getName()%></b></h3>
	                                <h4 class="media-heading btm-mrg-10" >
	                                  	<b style="color:blue">$<%=events.get(i).getPrice()%></b>
	                                	<form class="navbar-form" action="event" method="get">
										<div class="input-group">
												<div class="input-group-btn">
													<input type="hidden" value="<%=events.get(i).getEventId()%>" name="eventid">
													<button class="btn btn-primary btn-block btn-sm" type="submit"><i class="glyphicon glyphicon-eye-open"></i> See More!</button>
												</div>
											</div>
										</form>
									</h4>
	                                <ul class="list-inline mrg-0 btm-mrg-10 clr-535353">
	                                    <li>Duration: <%=events.get(i).getDuration()%> min</li>
	                                    <li style="list-style: none">|</li>
	                                    <li><%=events.get(i).getSeatsAvailable()%> seats available</li>
	                                </ul>
		                                <p><%=events.get(i).getDescription()%></p>
	                                <span class="fnt-lighter fnt-arial"><%=events.get(i).getStart()%></span>
	                            </div>
	                        </div>
	                    </div>
	                    <%}%>
	                    <!-- End Listing-->
	      		</div><!-- End Col -->
	            </div><!-- End row -->
	        </div><!-- End container -->
	    </div>        
	</body>
</html>